<wicket:panel>
	<div wicket:id="container" class="markdown-editor no-autosize name-changing-listener d-flex flex-column flex-grow-1 overflow-hidden">
		<div class="head flex-shrink-0">
			<div class="actions d-flex flex-wrap">
				<div class="normal-mode flex-wrap d-none d-lg-flex mr-4">
					<a class="do-bold" title="Bold"><wicket:svg href="bold" class="icon"></wicket:svg></a>
					<a class="do-italic" title="Italic"><wicket:svg href="italic" class="icon"></wicket:svg></a>
					<a class="do-header" title="Heading"><wicket:svg href="header" class="icon"></wicket:svg></a>
					<span class="separator"></span>
					<a class="do-link" title="Link"><wicket:svg href="link" class="icon"></wicket:svg></a>
					<a class="do-image" title="Image"><wicket:svg href="image" class="icon"></wicket:svg></a>
					<span class="separator"></span>
					<a class="do-list" title="Unordered list"><wicket:svg href="unordered-list" class="icon"></wicket:svg></a>
					<a class="do-orderlist" title="Ordered list"><wicket:svg href="ordered-list" class="icon"></wicket:svg></a>
					<a class="do-tasklist" title="Task list"><wicket:svg href="tick-box" class="icon"></wicket:svg></a>
					<a class="do-code" title="Code"><wicket:svg href="code" class="icon"></wicket:svg></a>
					<a class="do-quote" title="Quote"><wicket:svg href="quote" class="icon"></wicket:svg></a>
					<span class="separator"></span>
					<a class="do-emoji" title="Show emojis"><wicket:svg href="smile" class="icon"></wicket:svg></a>
					<a wicket:id="doMention" class="do-mention" title="Mention someone"><wicket:svg href="at" class="icon"></wicket:svg></a>
					<a wicket:id="doReference" title="Reference issue, build, or pull request"><wicket:svg href="hash" class="icon"></wicket:svg></a>
				</div>
				<div class="compact-mode mr-2">
					<a wicket:id="actionMenuTrigger"><wicket:svg href="menu" class="icon"></wicket:svg></a>
				</div>
				<div class="ml-auto d-flex flex-wrap">
					<a wicket:id="doSuggestion" class="do-suggestion mr-2" title="Code suggestion"><wicket:svg href="diff" class="icon"></wicket:svg></a>
					<a class="do-fixedwidth" title="Toggle fixed width font"><wicket:svg href="text-width" class="icon"></wicket:svg></a>
					<a class="do-fullscreen" title="Full screen"><wicket:svg href="expand" class="icon"></wicket:svg></a>
					<a class="do-help" title="Help"><wicket:svg href="question" class="icon"></wicket:svg></a>
					<span class="separator"></span>
					<a wicket:id="editLink" class="edit" title="Edit"><wicket:svg href="edit" class="icon"></wicket:svg></a>
					<a class="preview" title="Preview"><wicket:svg href="eye" class="icon"></wicket:svg></a>
					<a wicket:id="splitLink" class="split" title="Split view"><wicket:svg href="split" class="icon"></wicket:svg></a>
					<div wicket:id="lazyResourceLoader" class="d-none"></div>
				</div>						
			</div>			
			<div class="warning alert alert-notice alert-light-warning">
				<a class="close" data-dismiss="alert"><span><wicket:svg href="times" class="icon"/></span></a>
				<div class="message">Below content is restored from an unsaved change</div>
			</div>
			<div class="emojis"></div>
			<div class="help text-muted font-size-sm">
				<wicket:svg href="bulb" class="icon icon-sm"></wicket:svg> <a href="https://guides.github.com/features/mastering-markdown/" target="_blank">GitHub flavored markdown</a> is accepted, 
				with <a href="https://docs.onedev.io/appendix/markdown-syntax" target="_blank">mermaid and katex support</a>. 
				<span wicket:id="canAttachFile">You may also drop file/image to the input box, or paste image from clipboard</span>
			</div>
		</div>
		<div class="body d-flex flex-grow-1 overflow-hidden position-relative">
			<div wicket:id="edit" class="edit d-flex flex-column overflow-hidden position-relative flex-grow-1">
				<textarea wicket:id="input" class="form-control flex-grow-1 overflow-auto"></textarea>
				<div class="ui-resizable-handle ui-resizable-s flex-shrink-0"></div>
			</div>
			<div wicket:id="preview" class="preview position-relative d-flex flex-column flex-grow-1 overflow-hidden">
				<div wicket:id="rendered" class="markdown-rendered overflow-auto flex-grow-1"></div>
				<div class="ui-resizable-handle ui-resizable-s flex-shrink-0"></div>
			</div>
			<div class="ui-resizable-handle ui-resizable-s flex-shrink-0"></div>
		</div>
	</div>
	<wicket:fragment wicket:id="referenceMenuFrag">
		<a class="dropdown-item do-reference" data-reference=""><wicket:svg href="bug" class="icon mr-1"></wicket:svg> Reference Issue</a>
		<a class="dropdown-item do-reference" data-reference="pr"><wicket:svg href="pull-request" class="icon mr-1"></wicket:svg> Reference Pull Request</a>
		<a class="dropdown-item do-reference" data-reference="build"><wicket:svg href="play-circle" class="icon mr-1"></wicket:svg> Reference Build</a>
	</wicket:fragment>
	<wicket:fragment wicket:id="actionMenuFrag">
		<a class="dropdown-item do-bold"><wicket:svg href="bold" class="icon mr-1"></wicket:svg> Bold</a>
    	<a class="dropdown-item do-italic"><wicket:svg href="italic" class="icon mr-1"></wicket:svg> Italic</a>
		<a class="dropdown-item do-header"><wicket:svg href="header" class="icon mr-1"></wicket:svg> Heading</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item do-link"><wicket:svg href="link" class="icon mr-1"></wicket:svg> Link</a>
		<a class="dropdown-item do-image"><wicket:svg href="image" class="icon mr-1"></wicket:svg> Image</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item do-list"><wicket:svg href="unordered-list" class="icon mr-1"></wicket:svg> Unordered List</a>
		<a class="dropdown-item do-orderlist"><wicket:svg href="ordered-list" class="icon mr-1"></wicket:svg> Ordered List</a>
		<a class="dropdown-item do-tasklist"><wicket:svg href="tick-box" class="icon mr-1"></wicket:svg> Task List</a>
		<a class="dropdown-item do-code"><wicket:svg href="code" class="icon mr-1"></wicket:svg> Code</a>
		<a class="dropdown-item do-quote"><wicket:svg href="quote" class="icon mr-1"></wicket:svg> Quote</a>
		<div class="dropdown-divider"></div>
		<a class="dropdown-item do-emoji"><wicket:svg href="smile" class="icon mr-1"></wicket:svg> Show Emojis</a>
		<a wicket:id="doMention" class="dropdown-item do-mention"><wicket:svg href="at" class="icon mr-1"></wicket:svg> Mention Someone</a>
		<wicket:container wicket:id="doReference"></wicket:container>
	</wicket:fragment>
</wicket:panel>